<template>
      <div>
        <!-- 面包屑导航条 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/toOneList' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>发票管理</el-breadcrumb-item>
        </el-breadcrumb>
        <!--查看详情-->
        <el-dialog :title="this.ckk==0?'订单详情':'审核发票'" :visible.sync="isshow1">
		<p style="color: black;font-size: 25px">可发票总金额(不含税):{{price}}元</p>
          <el-form :model="billForm" ref="billForm" :rules="rules">
            <h1></h1>
            <el-form-item label="发票抬头：" label-width="100px">
              <el-input :disabled="this.ckk==0 || this.ckk==1" v-model="billForm.invoiceTitle" style="width: 220px"></el-input>
            </el-form-item>
            <el-form-item label="税号：" label-width="100px">
              <el-input :disabled="this.ckk==0 || this.ckk==1" v-model="billForm.invoiceNum" style="width: 220px"></el-input>
            </el-form-item>
            <el-form-item label="发票类型：" label-width="100px">
              <el-select :disabled="this.ckk==0 || this.ckk==1" v-model="billForm.invoiceType" clearable placeholder="请选择">
                <el-option  label="增值税普通发票" :value="0"></el-option>
                <el-option label="增值税专用" :value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="税率：" label-width="100px">
              <el-input :disabled="this.ckk==0 || this.ckk==1" v-model="billForm.taxRate" style="width: 220px"></el-input>
            </el-form-item>
            <el-form-item label="开票金额：" label-width="100px">
              <el-input :disabled="this.ckk==0" @blur="ckamount" v-model="billForm.amount" style="width: 220px"></el-input>
              <span v-if="inck==1">{{msg}}</span>
            </el-form-item>
            <el-form-item label="发票内容；" label-width="100px">
              <el-input :disabled="this.ckk==0" v-model="billForm.content" style="width: 220px"></el-input>
            </el-form-item>
            <el-form-item label="收件人：" label-width="100px">
              <el-input :disabled="this.ckk==0" v-model="billForm.receiver" style="width: 220px"></el-input>
            </el-form-item>
            <el-form-item label="联系电话：" label-width="100px">
              <el-input :disabled="this.ckk==0" v-model="billForm.tel" style="width: 220px"  ></el-input>
            </el-form-item>
            <el-form-item label="收货地址：" label-width="100px">
              <el-input :disabled="this.ckk==0" v-model="billForm.revAddress" style="width: 220px"></el-input>
            </el-form-item>
            <el-form-item label="物流公司：" label-width="100px">
              <el-input :disabled="this.ckk==0 " v-model="billForm.logistics_cym" style="width: 220px"></el-input>
            </el-form-item>
            <el-form-item label="快递单号：" label-width="100px">
              <el-input :disabled="this.ckk==0" v-model="billForm.logistics_code" style="width: 220px"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button v-if="this.ckk==1"  @click="updateAndSave(2)">通过</el-button>
            <el-button v-if="this.ckk==1"  @click="updateAndSave(3)">驳回</el-button>
            <el-button v-if="this.ckk==0" @click="isshow1=false">关闭</el-button>
          </div>
        </el-dialog>
        <el-dialog
          title="发票记录"
          :visible.sync="orderLogVisible"> <!--零件列表框 -->
          <el-table
            :data="loglist"
            stripe
            style="width: 100%">
            <el-table-column
              label="操作人"
              prop="userName">
            </el-table-column>
            <el-table-column
              label="操作说明"
              prop="remarks">
            </el-table-column>
            <el-table-column
              label="操作时间"
              prop="createtime">
              <template slot-scope="scope">
                {{scope.row.createtime | datefmt('YYYY-MM-DD hh:mm:ss')}}
              </template>
            </el-table-column>
          </el-table>
        </el-dialog>
    <!--数据查询-->
    <el-card class="box-card2">
      <el-form :model="searchForm" class="demo-form-inline">
        <el-row :gutter="20">
          <el-form-item>
            <el-col :span="3">
              <!--订单编号模糊查询-->
              <el-input placeholder="订单编号" v-model="searchForm.code" class="btn"></el-input>
            </el-col>
            <el-col :span="4">
              <!--生成时间区间查询-->
              <el-date-picker
                v-model="searchForm.min"
                type="date"
                placeholder="选择起始日期">
              </el-date-picker>
            </el-col>
            <el-col :span="4">
              <!--生成时间区间查询-->
              <el-date-picker
                v-model="searchForm.max"
                type="date"
                placeholder="选择结束日期">
              </el-date-picker>
            </el-col>
            <el-col :span="4">
              <el-select v-model="searchForm.state" placeholder="请选择状态">
                <el-option label="已提交" value="1"></el-option>
                <el-option label="已通过" value="2"></el-option>
                <el-option label="已驳回" value="3"></el-option>
                <el-option label="已邮寄" value="4"></el-option>
                <el-option label="已查收" value="5"></el-option>
              </el-select>
            </el-col>
            <el-button @click="searchBill" plain type="info" class="btn"  icon="el-icon-search">搜索</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </el-card>
    <!--列表展示-->
    <el-card class="box-card">
      <el-table
        :data="BillList"
        stripe
        style="width: 100%">
        <el-table-column
          type="index"
          width="50">
        </el-table-column>
        <el-table-column
          label="编号"
          prop="code"
          width="180">
        </el-table-column>
        <el-table-column
          label="客户id"
          prop="customerId"
          width="180">
        </el-table-column>
        <el-table-column
          label="电话"
          prop="tel"
          width="180">
        </el-table-column>
        <el-table-column
          label="发票标题"
          prop="invoiceTitle"
          width="180">
        </el-table-column>
        <el-table-column
          label="收件人"
          prop="receiver"
          width="180">
        </el-table-column>
        <el-table-column
          label="创建时间"
          prop="createDate"
          width="180">
          <template slot-scope="scope">
            {{scope.row.createDate | formatDate}}
          </template>
        </el-table-column>
        <el-table-column
          label="更新时间"
          prop="updateDate"
          width="180">
          <template slot-scope="scope">
            {{scope.row.updateDate | formatDate}}
          </template>
        </el-table-column>
        <el-table-column
          label="订单状态"
          prop="state"
          width="180">
          <template slot-scope="scope">
            {{scope.row.state | stateFilter}}
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作">
          <template slot-scope="scope">
            <el-popover placement="right" width="200" trigger="click">
              <el-button @click="getOrderLog(scope.row)" type="text">查看日志</el-button>
              <el-button v-if="scope.row.state==1" @click="getBill(scope.row,0)" type="text">查看详情</el-button>
              <el-button v-if="scope.row.state==1" @click="tock(scope.row,1)" type="text">审核</el-button>
              <el-button v-if="scope.row.state==2" @click="update(scope.row,4)" type="text">打印邮寄</el-button>
              <el-button slot="reference" type="text">更多操作</el-button>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="page.pagenum"
        :page-size="page.pagesize"
        :page-sizes="[5, 10, 20, 40]"
        :total="total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
    </el-card>
    <el-dialog
      title="发票记录"
      :visible.sync="orderLogVisible"> <!--零件列表框 -->
      <el-table
        :data="loglist"
        stripe
        style="width: 100%">
        <el-table-column
          label="操作人"
          prop="username">
        </el-table-column>
        <el-table-column
          label="操作说明"
          prop="remarks">
        </el-table-column>
        <el-table-column
          label="操作时间"
          prop="createtime">
          <template slot-scope="scope">
            {{scope.row.createTime | formatDate}}
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "bilList",
    data(){
      return{
        rules: {
          amount: [
            {max:this.priceIt, message: '超出金额', trigger: 'blur' }
          ]
        },
        loglist:[],
        orderLogVisible:false,
        billForm:{
          priceIt:0,
          price:0,
          amount:null,
        },
        BillList: [],
        isshow1:false,
        mater:{},//显示详情的材料对象
        searchForm:{},
        page: {
          pagenum: 0,
          pagesize: 5
        },
        total: 0,
        us:{
          id:'',
          userName:'',
          fullName:'',
        },//获取会话的用户对象
        ckk:'',
        priceIt:0,
        price:0,
        inck:0,
        msg:'',
      }
    },
    filters: {
      stateFilter: function (val) {
        if (val == 0) {
          return "未提交";
        }
        if (val == 2) {
          return "已通过";
        }
        if (val == 3) {
          return "已驳回";
        }
        if (val == 4) {
          return "已邮寄";
        }
        if (val == 5) {
          return "已查收";
        }
        if (val == 1) {
          return "已提交";
        }
      },

    },
    methods:{
      ckamount(){
        debugger
        let a=this.billForm.amount;
        let b=this.price;
        if(a>b){
          this.billForm.amount=null
          this.msg='已超过最大可开票金额，请重新输入'
          // this.$message({
          //   message:'已超过最大可开票金额，请重新输入',
          //   type:"warning"
          // })
        }else{
          this.msg='可用'
        }
      },
      updateAndSave(up){//通过或者驳回
        debugger
        let name= this.us.fullName;
        let userid=this.us.id;
        let bill=this.billForm
        this.$http.post("/bil/updateAndSave/"+up+"/"+name+"/"+userid,bill).then((res) => {
          if (res.data.success) {
            this.$message({
              message:res.data.message,
              type:"success"
            })
          } else {
            this.$message.error(res.data.message);
          }
          this.isshow2=false;
          this.searchBill();
        });
      },
      update(row,up){ //修改状态
        debugger
        let name= this.us.fullName;
        let userid=this.us.id;
        this.$http.post("/bil/updateStateByid/"+row.id+"/"+up+"/"+name+"/"+userid).then((res)=>{
          if(res.data.success){
            this.$message.success(res.data.message);
            this.searchBill();
          }else{
            this.$message.error(res.data.message);
          }
        })
      },
      tock(row,ck){//审核
        let id=row.id;
        let cks=ck;
        this.$router.push({path:'/bilAdd',query:{id:id,ck:cks}})
      },
      getBill(row,ck){//查看详情
        let id=row.id;
        this.ckk=ck;
        this.$http.post("/bil/getById/"+id).then((res)=>{
          if(res.data.success){
            this.$message.success(res.data.message);
            this.isshow1=true;
            this.billForm=res.data.result.invoice;
            this.priceIt=res.data.result.piOrder.priceIt;
            this.price=res.data.result.piOrder.price;
          }else{
            this.$message.error(res.data.message);
          }
        })
      },
      getOrderLog:function(row){//回显操作记录
        debugger
        this.orderLogVisible=true;
        this.$http.post("/billog/getById/"+row.id).then((res) => {
          if(res.data.success){
            this.$message.success(res.data.message);
            this.loglist = res.data.result;
          }else{
            this.$message.error(res.data.message);
          }
        });
      },
      searchBill() {//列表
        this.$http.post("/bil/list/" + this.page.pagenum + "/" + this.page.pagesize+ "/" + this.us.id, this.searchForm).then((res) => {
          debugger
          this.BillList = res.data.result.list;
          this.total = res.data.result.total;
        });
      },
      handleSizeChange: function (val) {//每页显示的条数
        this.page.pagesize = val;
        this.searchBill();
      },
      handleCurrentChange: function (val) {//显示的页数
        this.page.pagenum = val;
        this.searchBill();
      },
    },
    mounted() {
      this.us=JSON.parse(sessionStorage.getItem("user"));
      this.searchBill();
    }
  }
</script>

<style scoped>
  .box-card2{/*搜索框的样式*/
    height: 80px;
    border-radius: 40px;
  }
  .box-card{/*列表的样式*/
    border-radius: 30px;
  }
  .btn{/*按钮的圆角样式*/
    border-radius: 30px;
  }
</style>
